<template>
  <div >
    
     
     
   
   
      <!-- swiper1 -->
      <swiper :options="swiperOptionTop" class="gallery-top" ref="swiperTop">
        <swiper-slide>
            <img src="@/assets/product-detail/test1.png" alt="">
        </swiper-slide>
         <swiper-slide>
            <img src="@/assets/product-detail/test1.png" alt="">
        </swiper-slide>
         <swiper-slide>
            <img src="@/assets/product-detail/test1.png" alt="">
        </swiper-slide>
        
       
        <div class="swiper-button-next swiper-button-next1 swiper-button-white" slot="button-next"></div>
        <div class="swiper-button-prev swiper-button-prev1 swiper-button-white" slot="button-prev"></div>
      </swiper>
      <!-- swiper2 Thumbs -->
      <swiper :options="swiperOptionThumbs" class="gallery-thumbs" ref="swiperThumbs">
        <swiper-slide> <img src="@/assets/product-detail/test1.png" alt=""></swiper-slide>
        <swiper-slide> <img src="@/assets/product-detail/test1.png" alt=""></swiper-slide>
        <swiper-slide> <img src="@/assets/product-detail/test1.png" alt=""></swiper-slide>

      
        <div class="swiper-button-next swiper-button-next2 swiper-button-white" slot="button-next"></div>
        <div class="swiper-button-prev swiper-button-prev2 swiper-button-white" slot="button-prev"></div>
      </swiper>
   </div>
</template>

<script>
  export default {
    data() {
      return {
        swiperOptionTop: {
          notNextTick: true,
          nextButton: '.swiper-button-next1',
          prevButton: '.swiper-button-prev1',
          spaceBetween: 10
        },
        swiperOptionThumbs: {
        //   notNextTick: true,
          spaceBetween: 10,
          centeredSlides: true,
          slidesPerView: 'auto',
          touchRatio: 0.2,
          slideToClickedSlide: true,
          nextButton: '.swiper-button-next2',
          prevButton: '.swiper-button-prev2',
        }
      }
    },
    mounted() {
      const swiperTop = this.$refs.swiperTop.swiper
      const swiperThumbs = this.$refs.swiperThumbs.swiper
      swiperTop.params.control = swiperThumbs
      swiperThumbs.params.control = swiperTop
    }
  }
</script>

<style lang="stylus" scoped>
img
    width: 100%;
.swiper-container {
/* background-color: #000; */
}
.swiper-slide {
    background-size: cover;
    background-position: center;
}
.gallery-top {
    height: 440px;
    width: 100%;
}
.gallery-thumbs {
    height: 20%!important;
    box-sizing: border-box;
    padding: 10px 0;
}
.gallery-thumbs .swiper-slide {
    width: 117px;
    height: 88px;
    opacity: 0.4;
}
.gallery-thumbs .swiper-slide-active {
    opacity: 1;
}
.swiper-button-next2
    background url('~@/assets/product-detail/right1.png') no-repeat center center
    height: 88px
    margin-top -44px
    right 0
.swiper-button-prev2
    background url('~@/assets/product-detail/left1.png') no-repeat center center
    height: 88px;
    margin-top -44px
    left 0
</style>